<template>
    <div style="height: 50px;">
        <el-button round @click="add()">添加</el-button>
        <el-button round @click="del()">删除</el-button>
        <el-button round @click="upd()">修改</el-button>
        <el-button round @click="Export()">导出</el-button>
    </div>

    <!-- 查询条件 -->
    <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="真实姓名">
            <el-input v-model="form.MName" placeholder="请输入真实姓名" clearable />
        </el-form-item>
        <el-form-item label="入职日期">
            <el-date-picker v-model="form.Mstart" type="date" value-format="YYYY-MM-DD" clearable />-
            <el-date-picker v-model="form.Mend" type="date" value-format="YYYY-MM-DD" clearable />
        </el-form-item>
        <el-form-item label="生日">
            <el-date-picker v-model="form.Bstart" type="date" value-format="YYYY-MM-DD" clearable />-
            <el-date-picker v-model="form.Bend" type="date" value-format="YYYY-MM-DD" clearable />
        </el-form-item>
        <el-form-item label="部门">
            <el-select v-model="form.SectorId" placeholder="请选择部门" clearable style="width: 200px;">
                <el-option v-for="item in sectorlist" :key="item.value" :label="item.label" :value="item.value"
                    @click="GetPostList()" />
            </el-select>
        </el-form-item>
        <el-form-item label="岗位">
            <el-select v-model="form.PostId" placeholder="请选择岗位" clearable style="width: 200px;">
                <el-option v-for="item in postlist" :key="item.postId" :label="item.postName" :value="item.postId" />
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetManpowerList()">查询</el-button>
        </el-form-item>
    </el-form>

    <!-- 显示列表 -->
    <el-row>
        <el-col :span="3">
            <el-tree style="max-width: 600px" :data="sectorlist" :props="defaultProps" @node-click="handleNodeClick" />
        </el-col>
        <el-col :span="21">
            <el-table :data="manpowerList" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column type="index" label="序号" align="center" />
                <el-table-column prop="mNumber" label="档案编号" align="center" />
                <el-table-column prop="mName" label="真实姓名" align="center" />
                <el-table-column prop="users" label="登录账号" align="center" />
                <el-table-column prop="mSex" label="性别" align="center">
                    <template v-slot="scope">
                        {{ scope.row.mSex == 1 ? '男' : '女' }}
                    </template>
                </el-table-column>
                <el-table-column prop="mPhone" label="联系电话" align="center" />
                <el-table-column prop="mBirthDay" label="出生日期" align="center">
                    <template v-slot="scope">
                        {{ scope.row.mBirthDay.substring(0, 10) }}
                    </template>
                </el-table-column>
                <el-table-column prop="sectorName" label="所在部门" align="center" />
                <el-table-column prop="postName" label="所在岗位" align="center" />
            </el-table>
        </el-col>
    </el-row>

    <!-- 分页 -->
    <table style="margin: auto;">
        <tr>
            <td>
                <el-pagination v-model:current-page="Page.Pindex" v-model:page-size="Page.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" layout="total,slot,sizes" :total="Page.lcount">
                    <span> , 每页 {{ Page.Psize }} 条，当前 {{ Page.Pindex }} / {{ Page.pcount }} 条</span>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="Page.Pindex" v-model:page-size="Page.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, prev, pager, next" :total="Page.lcount">
                    <el-button :disabled="Page.Pindex == 1" @click="Page.Pindex = 1">首页</el-button>
                </el-pagination>
            </td>
            <td>
                <el-pagination v-model:current-page="Page.Pindex" v-model:page-size="Page.Psize"
                    :page-sizes="[15, 20, 30, 40]" :background="true" prev-text="上一页" next-text="下一页"
                    layout="slot, jumper" :total="Page.lcount">
                    <el-button :disabled="Page.Pindex == Page.pcount" @click="Page.Pindex = Page.pcount">尾页</el-button>
                </el-pagination>
            </td>
        </tr>
    </table>

</template>

<script setup lang='ts'>
import axios from 'axios'
import { ref, reactive, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import * as XLSX from 'xlsx';
import { ElMessage, ElMessageBox } from 'element-plus'
const router = useRouter();
const route = useRoute();
import http from '../../http.js'

//查询条件
const form = reactive({
    MName: "",
    Mstart: "",
    Mend: "",
    Bstart: "",
    Bend: "",
    SectorId: "",
    PostId: ""
})

//分页
const Page = reactive({
    Pindex: 1,
    Psize: 10,
    pcount: 0,
    lcount: 0
})

onMounted(() => {
    GetSectorList();
    GetManpowerList();
})

const add = () => {
    router.push('/AddManpower');
}

//部门
const sectorlist = ref([])
const GetSectorList = () => {
    axios.get(http.zblnb + '/vendor/api/Post/GetSectorList')
        .then(res => {
            sectorlist.value = res.data.data;
        })
}

//岗位
const postlist = ref([])
const GetPostList = () => {
    form.PostId = "";
    axios.get(http.zblnb + '/vendor/api/Post/GetPostList?SectorId=' + (form.SectorId || 0))
        .then(res => {
            postlist.value = res.data.data;
        })
}

//树形
const handleNodeClick = (data: Tree) => {
    console.log(data)
    form.SectorId = data.value

    GetManpowerList();
}

//显示人员档案
const manpowerList = ref([])
const GetManpowerList = () => {
    axios.get(http.zblnb + '/vendor/api/Manpower/GetManpowerList', {
        params: {
            Pindex: Page.Pindex,
            Psize: Page.Psize,
            MName: form.MName || "",
            Mstart: form.Mstart || "",
            Mend: form.Mend || "",
            Bstart: form.Bstart || "",
            Bend: form.Bend || "",
            SectorId: form.SectorId || "",
            PostId: form.PostId || "",
        }
    })
        .then(res => {
            manpowerList.value = res.data.data.list
            Page.lcount = res.data.data.lcount;
            Page.pcount = res.data.data.pcount;
            console.log(res.data.data)
        })
}

//多选框
const check = ref([])
const handleSelectionChange = (val: User[]) => {
    check.value = val
    console.log(check.value)
}

//删除条件
const DELinfo = ref({
    "manpowerId": [],
    "delName": "string",
    "office_Id": "string",
    "user_Id": 0
})

//删除
const del = () => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
        }
    )
        .then(() => {
            let ids = check.value.map(ele => ele.manpowerId);
            DELinfo.value.manpowerId = ids
            console.log(DELinfo.value);
            axios.put(http.zblnb + '/vendor/api/Manpower/DelManpower', DELinfo.value)
                .then(res => {
                    if (res.data.data > 0) {
                        ElMessage.success('删除成功')
                        GetManpowerList();
                    }
                    else {
                        ElMessage.error('删除失败');
                    }
                })
                .catch(err => {
                    console.log(err);
                })
        })
        .catch(() => {

        })


}

//修改
const upd = () => {
    let ids = check.value.map(ele => ele.manpowerId);
    router.push('/UpdManpower?manpowerId=' + ids);
}


//导出
const Export = () => {
    ElMessageBox.confirm('是否确认导出?', '警告', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    })
        .then((res) => {
            if (check.value.length <= 0) {
                ElMessage.warning('请选择数据!');
                return;
            }
            //表头
            let tableData = [
                ['序号', '档案编号', '真实姓名', '登录账号', '性别', '联系电话', '出生日期', '所在部门', '所在岗位']
            ]
            check.value.forEach((item, index) => {
                let rowData = []
                //导出内容的字段
                rowData = [
                    index + 1,
                    item.mNumber,
                    item.mName,
                    item.users,
                    item.mSex,
                    item.mPhone,
                    item.mBirthDay,
                    item.sectorName,
                    item.postName,
                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '人员档案') // 工作簿名称
            let name = '人员档案' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}


const defaultProps = {
    children: 'children',
    label: 'label',
}



</script>

<style></style>